<template>
<div>
  <!-- 第一部分 -->
  <van-field
  readonly
  clickable
  name="picker"
  :value="value1"
  label="赛区意向"
  placeholder="点击选择城市"
  @click="showPicker1 = true"
  right-icon='arrow'
  required
/>
<van-popup v-model="showPicker1" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns1"
    @confirm="onConfirm_first"
    @cancel="showPicker1 = false"
  />
</van-popup>

<!-- 第一部分的场馆 -->
  <van-field
  readonly
  clickable
  name="picker"
  :value="value1_1"
  label="场馆意向1"
  placeholder="点击选择城市"
  @click="showPicker1_1 = true"
  right-icon='arrow'
  required
/>
<van-popup v-model="showPicker1_1" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_first_one"
    @cancel="showPicker1_1 = false"
  />
</van-popup>


  <van-field
  readonly
  clickable
  name="picker"
  :value="value1_2"
  label="场馆意向2"
  placeholder="点击选择城市"
  @click="showPicker1_2 = true"
  right-icon='arrow'
  required
  style="margin-bottom:10px"
/>
<van-popup v-model="showPicker1_2" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_first_two"
    @cancel="showPicker = false"
  />
</van-popup>


<!-- 第二部分 -->
  <van-field
  readonly
  clickable
  name="picker"
  :value="value2"
  label="赛区意向"
  placeholder="点击选择城市"
  @click="showPicker2 = true"
  right-icon='arrow'
/>
<van-popup v-model="showPicker2" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns1"
    @confirm="onConfirm_second"
    @cancel="showPicker2 = false"
  />
</van-popup>


<van-field
  readonly
  clickable
  name="picker"
  :value="value2_1"
  label="场馆意向1"
  placeholder="点击选择城市"
  @click="showPicker2_1 = true"
  right-icon='arrow'
/>
<van-popup v-model="showPicker2_1" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_second_one"
    @cancel="showPicker1_1 = false"
  />
</van-popup>


  <van-field
  readonly
  clickable
  name="picker"
  :value="value2_2"
  label="场馆意向2"
  placeholder="点击选择城市"
  @click="showPicker2_2 = true"
  right-icon='arrow'
  style="margin-bottom:10px"
/>
<van-popup v-model="showPicker2_2" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_second_two"
    @cancel="showPicker2_2 = false"
  />
</van-popup>
<!-- 第三部分 -->
  <van-field
  readonly
  clickable
  name="picker"
  :value="value3"
  label="赛区意向"
  placeholder="点击选择城市"
  @click="showPicker3 = true"
  right-icon='arrow'
/>
<van-popup v-model="showPicker3" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns1"
    @confirm="onConfirm_third"
    @cancel="showPicker3 = false"
  />
</van-popup>


<van-field
  readonly
  clickable
  name="picker"
  :value="value3_1"
  label="场馆意向1"
  placeholder="点击选择城市"
  @click="showPicker3_1 = true"
  right-icon='arrow'
/>
<van-popup v-model="showPicker3_1" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_third_one"
    @cancel="showPicker3_1 = false"
  />
</van-popup>


  <van-field
  readonly
  clickable
  name="picker"
  :value="value3_2"
  label="场馆意向2"
  placeholder="点击选择城市"
  @click="showPicker3_2 = true"
  right-icon='arrow'
  style="margin-bottom:10px"
/>
<van-popup v-model="showPicker3_2" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns2"
    @confirm="onConfirm_third_two"
    @cancel="showPicker3_2 = false"
  />
</van-popup>
<!-- 服务意向 -->
  <van-field
  readonly
  clickable
  name="picker"
  :value="value_server1"
  label="服务类别意向"
  placeholder="点击选择城市"
  @click="showPicker_server1 = true"
  right-icon='arrow'
  required
/>
<van-popup v-model="showPicker_server1" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns_server"
    @confirm="onConfirm_server_one"
    @cancel="showPicker = false"
  />
</van-popup>

  <van-field
  readonly
  clickable
  name="picker"
  :value="value_server2"
  label="服务类别意向"
  placeholder="点击选择城市"
  @click="showPicker_server2 = true"
  right-icon='arrow'
/>
<van-popup v-model="showPicker_server2" position="bottom">
  <van-picker
    show-toolbar
    :columns="columns_server"
    @confirm="onConfirm_server_two"
    @cancel="showPicker = false"
  />
</van-popup>

<!-- 是否接受调剂 -->
<van-field name="radio" label="是否同意调剂" required style="margin-bottom:20px">
  <template #input>
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio name="1">是</van-radio>
      <van-radio name="0">否</van-radio>
    </van-radio-group>
  </template>
</van-field>

<van-button type="info" block round @click="enter">提交</van-button>
</div>
</template>

<script>
export default {
  data() {
    return {
      name:window.sessionStorage.getItem('name'),
      radio: '1',
      value1:'',
      value1_1:'',
      value1_2:'',
      value2:'',
      value2_1:'',
      value2_2:'',
      value3:'',
      value3_1:'',
      value3_2:'',
      value_server1:'',
      value_server2:'',
      columns1:[],
      columns2:[],
      columns_server:[],
      showPicker1: false,
      showPicker1_1: false,
      showPicker1_2: false,
      showPicker2: false,
      showPicker2_1: false,
      showPicker2_2: false,
      showPicker3: false,
      showPicker3_1: false,
      showPicker3_2: false,
      showPicker_server1:false,
      showPicker_server2:false,
    };
  },
  methods: {
    onConfirm_first(value) {
      this.value1 = value;
      this.showPicker1 = false;
    },
    onConfirm_first_one(value) {
      this.value1_1 = value;
      this.showPicker1_1 = false;
    },
    onConfirm_first_two(value) {
      this.value1_2 = value;
      this.showPicker1_2 = false;
    },
    onConfirm_second(value){
      this.value2 = value;
      this.showPicker2 = false;
    },
    onConfirm_second_one(value){
      this.value2_1 = value;
      this.showPicker2_1 = false;
    },
    onConfirm_second_two(value){
      this.value2_2 = value;
      this.showPicker2_2 = false;
    },
    onConfirm_third(value){
      this.value3 = value;
      this.showPicker3 = false;
    },
    onConfirm_third_one(value){
      this.value3_1 = value;
      this.showPicker3_1 = false;
    },
    onConfirm_third_two(value){
      this.value3_2= value;
      this.showPicker3_2 = false;
    },
    onConfirm_server_one(value){
      this.value_server1=value;
      this.showPicker_server1=false;
    },
    onConfirm_server_two(value){
      this.value_server2=value;
      this.showPicker_server2=false;
    },
    enter(){
      if(this.value1&&this.value1_1&&this.value1_2&&this.value_server1){
        let params=`username=${this.name}&city=${this.value1}&stadium1=${this.value1_1}&stadium2=${this.value1_2}&service=${this.value_server1}&service_alt=${this.value_server2}&adjust=${this.radio}&city_alt=${this.value2}&stadium_alt_1=${this.value2_1}&stadium_alt_2=${this.value2_2}&city_alt_a=${this.value3}&stadium_alt_a=${this.value3_1}&stadium_alt_b=${this.value3_2}`
        this.axios.post('/volunteer',params).then(res=>{
          console.log(res);
        })
      }else{
        this.$toast('*号项必须填写')
      }
    }
  },
  watch: {
    radio(newValue, oldValue) {
      console.log(newValue);
    }
  },
  mounted () {
    let url='/areacity';
    this.axios.get(url).then(res=>{
      let data=res.data.results
      data.forEach(element => {
        this.columns1.push(element.cityname)
      });
    })
    let url1='/getstadium';
    this.axios.get(url1).then(res=>{
      let data=res.data.results
      data.forEach(element => {
        this.columns2.push(element.stadium)
      });
    })
    let url2='/volunteer_service';
    this.axios.get(url2).then(res=>{
      let data=res.data.results
      data.forEach(element => {
        this.columns_server.push(element.service_item)
      });
    })
  },
};
</script>

<style scoped>

</style>